<template>
	<view class="ec-view-box">
		<view class="ec-view-box-title flex-bt">
			<view class="flex-cc" @click="turnTo">
				<image src="../../static/image/home/wave.png" mode="widthFix" style="width: 40rpx" class="ml10" />
				<text style="color: #353535" class="ml10 fw600">水库站：{{ info.data.name }} {{ info.data.id }}</text>
				<image class="ml10" src="../../static/image/common/turn.png" mode="widthFix" style="width: 60rpx" />
			</view>
		</view>
		<view class="live-box-z-q">
			<view class="flex-bc">
				<view>
					<text class="title">起止时间</text>
					<text class="ml15 fs26">
						<text @click="changeTime('begin')">{{ begin }}</text>
						<text class="ml10 mr10">~</text>
						<text @click="changeTime('end')">{{ end }}</text>
					</text>
				</view>
				<view class="time">
					<i class="iconfont icon-calendar"> </i>
				</view>
			</view>
			<view class="flex-bc">
				<view>
					<text class="title">当前水位</text>
					<text class="ml15 value">{{ z.value }}m</text>
				</view>
				<view class="time">{{ z.time }}</view>
			</view>
			<view class="flex-bc">
				<view>
					<text class="title">当前入库流量</text>
					<text class="ml15 value">{{ inq.value }}m³/s</text>
				</view>
				<view class="time">{{ inq.time }}</view>
			</view>
			<view class="flex-bc">
				<view>
					<text class="title">当前出库流量</text>
					<text class="ml15 value">{{ outq.value }}m³/s</text>
				</view>
				<view class="time">{{ outq.time }}</view>
			</view>
		</view>
		<view style="width: 100%; flex-wrap: wrap" class="flex-sa mt10">
			<block-card
				style="margin: 5rpx 0"
				:width="table.length > 4 ? '235rpx' : '165rpx'"
				:data="i"
				v-for="(i, index) in table"
				:key="index"
			></block-card>
		</view>
		<view style="width: 100%; height: 400rpx" class="mt15">
			<waterEc :options="ecData"></waterEc>
		</view>
		<u-picker
			mode="time"
			:default-time="showTimeValue"
			v-model="timeShow"
			:params="timeParams"
			@confirm="confirmTime"
		></u-picker>
	</view>
</template>
<script>
	import controlApi from '@/api/monitor/control.js'
	import tool from './ec.js'
	import moment from 'moment'
	export default {
		name: 'ec',
		props: {
			nodeId: {
				type: null,
				default: null
			}
		},
		components: {
			'block-card': () => import('@/components/home/block-card.vue'),
			waterEc: () => import('@/components/home/waterEc.vue')
		},
		data() {
			return {
				table: [],
				ecData: {},
				info: {
					data: {}
				},
				z: {
					time: '',
					value: ''
				},
				inq: {
					time: '',
					value: ''
				},
				outq: {
					time: '',
					value: ''
				},
				begin: moment().add(-24, 'hours').format('YYYY-MM-DD HH:mm:00'),
				end: moment().format('YYYY-MM-DD HH:mm:00'),
				timeShow: false,
				timeParams: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: false
				},
				showTimeValue: this.end
			}
		},
		methods: {
			async init() {
				const info = await controlApi.getInfo({
					projectId: '3bc0fb05339a46d7966a7abac9fc3516',
					nodeId: this.nodeId,
					nodeType: 'WPStationRR'
				})
				this.info = info.data
				const monitorData = await controlApi.getMonitorData({
					projectId: '3bc0fb05339a46d7966a7abac9fc3516',
					nodeId: this.nodeId,
					nodeType: 'WPStationRR',
					// begin: '2023-03-27 15:00:00',
					// end: '2023-03-28 15:00:00'
					begin: this.begin,
					end: this.end
				})
				const { table, option } = tool.dealDataEv(info.data, monitorData.data, false)
				this.table = table
				this.ecData = option
				let z = monitorData.data.z || []
				if (z.length > 0) {
					const list = z.filter((num) => typeof num.value === 'number' && !isNaN(num.value))
					this.z = list.length > 0 ? list[list.length - 1] : z[z.length - 1]
				}

				let outq = monitorData.data.outq || []
				if (outq.length > 0) {
					const list = outq.filter((num) => typeof num.value === 'number' && !isNaN(num.value))
					this.outq = list.length > 0 ? list[list.length - 1] : outq[outq.length - 1]
				}

				let inq = monitorData.data.inq || []
				if (inq.length > 0) {
					const list = inq.filter((num) => typeof num.value === 'number' && !isNaN(num.value))
					this.inq = list.length > 0 ? list[list.length - 1] : inq[inq.length - 1]
				}
			},
			changeTime(value) {
				this.timeTpye = value
				if (value == 'begin') {
					this.showTimeValue = this.begin
				} else {
					this.showTimeValue = this.end
				}
				this.timeShow = true
			},
			confirmTime(value) {
				let time = `${value.year}-${value.month}-${value.day} ${value.hour}:${value.minute}:00`
				let timtM = moment(time)
				if (this.timeTpye == 'begin') {
					if (timtM.isAfter(moment(this.end))) {
						uni.showToast({
							icon: 'error',
							title: '起始时间小于结束时间',
							duration: 1500
						})
						return
					} else {
						this.begin = time
					}
				} else {
					if (timtM.isBefore(moment(this.begin))) {
						uni.showToast({
							icon: 'error',
							title: '结束时间大于起始时间',
							duration: 1500
						})
						return
					} else {
						this.end = time
					}
				}
				this.timeShow = false
				this.init()
			},
			turnTo() {
				uni.navigateTo({ url: `/pages-subPackages/monitor/skDetai?id=${this.nodeId}` })
			}
		},
		computed: {},
		mounted() {
			this.$nextTick(() => {
				this.init()
			})
		}
	}
</script>
<style lang="less" scoped>
	.ec-view-box {
		width: 100%;
		height: 100%;
		padding-top: 15rpx;
		.ec-view-box-title {
			width: 691rpx;
			margin: 0 0 15rpx 15rpx;
			height: 58rpx;
			border-radius: 10rpx;
			.btn-more {
				// width: 105rpx;
				height: 40rpx;
				background: #eaf2ff;
				border: 1rpx solid #0085ff;
				border-radius: 39rpx;
				padding: 10rpx 20rpx;
				color: #0085ff;
				font-size: 22rpx;
				font-weight: 600;
			}
		}
	}
	.live-box-z-q {
		display: flex;
		width: 100%;
		padding: 0 5rpx;
		flex-direction: column;
		.flex-bc {
			width: 96%;
			padding: 0 3rpx;
			margin: 0 auto;
			align-items: center;
			height: 49rpx;
			background: #f9fbff;
			backdrop-filter: blur(21.5rpx);
			/* Note: backdrop-filter has minimal browser support */
			border-radius: 10rpx;
			margin-bottom: 7rpx;
		}
		.title {
			color: #6c6c6c;
			font-size: 24rpx;
		}
		.value {
			color: #0085ff;
			font-size: 24rpx;
			font-weight: 600;
		}
		.time {
			color: #0085ff;
			font-weight: 600;
			font-size: 24rpx;
		}
	}
</style>
